<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8" /> 	
	<title>jQuery Mobile</title> 
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>		
</head> 
<body>  

  
  <div data-role="page">         
  <div data-role="header">							  
    <h1>Transition</h1>
  </div>								
  <div data-role="content">    
      <h1>Page Animation</h1>     
      <p><a href="#secondPage" data-transition="slide">Slide</a></p>
      <p><a href="#secondPage" data-transition="slideup">Slide Up</a></p>
      <p><a href="#secondPage" data-transition="slidedown">Slide Down</a></p>
      <p><a href="#secondPage" data-transition="pop">Pop</a></p>
      <p><a href="#secondPage" data-transition="fade">Fade</a></p>
      <p><a href="#secondPage" data-transition="flip">Flip</a></p>
      <p><a href="#secondPage" data-transition="slide" data-direction="reverse">Slide Reverse</a></p>
  </div>   	  	    
  </div>

  
  
  <!-- Page 2 -->
  <div data-role="page" id="secondPage">         
  <div data-role="header">							  
      <h1>Page 2</h1>
  </div>								
  <div data-role="content">    
      <h1>Second Page</h1>
  </div>




</body>
</html>

